<template>
  <div class="page">
    <div class="page__bd">
      <!-- 我的参与与我的投票 -->
      <div class="weui-navbar">
        <!-- tab 导航 -->
        <block v-for="item in tabs" :key="index">
          <div :id="index" :class="'weui-navbar__item '+[activeIndex==index?'weui-bar__item_on':'']" @click="tabClick">
            <div class="weui-navbar__title">{{item}}</div>
          </div>
        </block>
        <!-- 左边的line -->
        <div
          class="weui-navbar__slider"
          :style="'left:'+sliderLeft+'px;transform:translateX('+sliderOffset+'px)'"
        ></div>
      </div>
      <!-- 显示panel -->
      <div class="weui-tab__panel">
        <div class="weui-tab__content" :hidden="activeIndex!=0">
          <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd">
              <block v-for="item in topics" :key="index">
                <a url="#" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <image class="weui-media-box__thumb" :src="item.oneVoteData.files[0]" />
                  </div>
                  <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <div class="weui-media-box__title">{{item.oneVoteData.title}}</div>
                    <div class="weui-media-box__desc">{{item.oneVoteData.description}}</div>
                  </div>
                </a>
              </block>
            </div>
          </div>
        </div>

        <div class="weui-tab__content" :hidden="activeIndex!=1">
          <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd">
              <block v-for="item in topics" :key="index">
                <a url="#" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <image class="weui-media-box__thumb" :src="item.oneVoteData.files[0]" />
                  </div>
                  <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <div class="weui-media-box__title">{{item.oneVoteData.title}}</div>
                    <div class="weui-media-box__desc">{{item.oneVoteData.description}}</div>
                  </div>
                </a>
              </block>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let that = this
    this.onQuery();

    //利用微信接口获取窗口信息
    wx.getSystemInfo({
      success:(res)=>{
        console.log('getSystemInfo',res)
        //把获取到的窗口宽度和tabs的长度，来计算值
        that.sliderLeft = (res.windowWidth / that.tabs.length - that.sliderWidth)/2
        that.sliderOffset =res.windowWidth / that.tabs.length * that.activeIndex
      }
    })
  },

  data() {
    return {
      sliderWidth:100,//需要设置slider的宽度，用户计算中间位置
      tabs: ["我发起的", "我参与的"],
      activeIndex: 0,
      sliderLeft: 0,
      sliderOffset: 0,
      icon60:
        "",
      topics: []
    };
  },
  methods: {
    //tab按钮的点击
    tabClick(e){
      console.log(e)
      this.activeIndex = e.currentTarget.id
      //线条的动态变化
      this.sliderOffset = e.currentTarget.offsetLeft
    },
    onQuery() {
      let that = this;
      const db = wx.cloud.database();
      db
        .collection("vote")
        .where({
          _openid: "ofG444-XzfAKViLygnPAJbmSpuEE"
        })
        .get({
          success: res => {
            console.log(res);
            that.topics = res.data;
          }
        });
    }
  }
};
</script>

<style>
</style>